<template>
  <div class="nav-bar">
  <van-icon name="chat-o" />
  <van-search
  shape="round"
  background="red"
  placeholder="请输入搜索关键词"
/>
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
  name: 'NavBar',
  methods: {
    onClickLeft () {
      Toast('返回')
    },
    onClickRight () {
      Toast('按钮')
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-bar {
display:flex;
justify-content:space-around;
background-color: red;
align-items: center;
}
.van-icon {
  font-size: 0.8rem;
}
.van-search {
    flex: 1
  }
</style>
